<template>
  <div class="app-container">
    <el-button
      :loading="downloadLoading"
      class="handle-button"
      @click="exportExcel(followupData)"
      icon="el-icon-download"
      type="primary"
    ></el-button>
    <el-table
      :data="tables.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      id="out-table"
      border
    >
      <el-table-column prop="name" label="学员姓名" align="center"></el-table-column>
      <el-table-column prop="outProduction" label="意向脱产" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.outProduction == 'true'">√</span>
          <span v-else-if="scope.row.outProduction == 'false'">×</span>
        </template>
      </el-table-column>
      <el-table-column prop="publicPraise" label="意向口碑" align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.publicPraise == 'true'">√</i>
          <i v-else-if="scope.row.publicPraise == 'false'">×</i>
        </template>
      </el-table-column>
      <el-table-column prop="certificate" label="意向证书" align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.certificate == 'true'">√</i>
          <i v-else-if="scope.row.certificate == 'false'">×</i>
        </template>
      </el-table-column>
      <el-table-column prop="intEducation" label="意向学历" align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.intEducation == 'true'">√</i>
          <i v-else-if="scope.row.intEducation == 'false'">×</i>
        </template>
      </el-table-column>
      <el-table-column prop="repPurchase" label="意向复购" align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.repPurchase == 'true'">√</i>
          <i v-else-if="scope.row.repPurchase == 'false'">×</i>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注情况" align="center"></el-table-column>
      <el-table-column label="操作" align="center" min-width="135px">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="请输入姓名搜索" />
        </template>
        <template slot-scope="scope">
          <el-button
            title="详情"
            @click="handleMessage(scope.row)"
            size="mini"
            type="info"
            circle
            icon="el-icon-tickets"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block" style="margin-top:15px" v-if="followupData.length>10">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 侧消息 -->
    <el-drawer
      :title="form.name + ' 意向'"
      :visible.sync="messageBox"
      direction="rtl"
      size="50%"
      :xs="24"
      :sm="24"
    >
      <el-collapse v-model="activeName" accordion style="padding:0 15px">
        <el-collapse-item title="增值服务" name="1">
          <!-- 第三个 -->
          <el-form ref="form" :model="fromdata" label-width="80px">
            <el-form-item label="增值服务:">
              <el-checkbox label="意向脱产" v-model="fromdata.outProduction" name="type"></el-checkbox>
              <el-checkbox label="意向口碑" v-model="fromdata.publicPraise" name="type"></el-checkbox>
              <el-checkbox label="意向证书" v-model="fromdata.certificate" name="type"></el-checkbox>
              <el-checkbox label="意向学历" v-model="fromdata.intEducation" name="type"></el-checkbox>
              <el-checkbox label="意向复购" v-model="fromdata.repPurchase" name="type"></el-checkbox>
              <el-input type="textarea" placeholder="备注情况" v-model="textarea"></el-input>
            </el-form-item>
            <el-form-item v-if="local.position!=2">
              <el-button type="primary" @click="submit">立即保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索框绑定
      search: "",
      downloadLoading: false,
      // 表格数据
      followupData: [],
      form: {
        name: ""
      },
      // 学员意向
      messageBox: false,
      activeName: "1",
      fromdata: {
        outProduction: false,
        publicPraise: false,
        certificate: false,
        intEducation: false,
        repPurchase: false
      },
      textarea: "",
      // 分页
      currentPage: 1, // 默认第一页
      pageSize: 10, // 每页大小默认值
      local: localStorage
    };
  },
  created() {
    this.reload();
  },
  watch: {
    // 检测表格数据过滤变化，自动跳到第一页
    tables() {
      this.currentPage = 1;
    }
  },
  computed: {
    // 搜索过滤
    tables() {
      const search = this.search;
      if (search) {
        return this.followupData.filter(dataNews => {
          return String(dataNews.name)
            .toLowerCase()
            .includes(search.toLowerCase());
        });
      }
      return this.followupData;
    },
    // 总条数
    total() {
      return this.tables.length;
    }
  },
  methods: {
    reload() {
      this.followupData = [];
      this.axios.get("/student/getTall").then(res => {
        for (var i = 0; i < res.data.data.length; i++) {
          if (
            res.data.data[i].teacher == localStorage.username ||
            res.data.data[i].manager == localStorage.username
          ) {
            this.followupData.push(res.data.data[i]);
          }
          if (localStorage.position == "2") {
            this.followupData.push(res.data.data[i]);
          }
        }
      });
    },
    // 打开学员更多信息
    handleMessage(item) {
      this.messageBox = true;
      this.form.name = item.name;
      this.clearFormdata();
      this.axios
        .get("/student/getTall", { params: { name: item.name } })
        .then(res => {
          if (res.data.data.length > 0) {
            if (res.data.data[0].outProduction) {
              this.fromdata.outProduction = Boolean(
                JSON.parse(res.data.data[0].outProduction)
              );
            }
            if (res.data.data[0].publicPraise) {
              this.fromdata.publicPraise = Boolean(
                JSON.parse(res.data.data[0].publicPraise)
              );
            }
            if (res.data.data[0].certificate) {
              this.fromdata.certificate = Boolean(
                JSON.parse(res.data.data[0].certificate)
              );
            }
            if (res.data.data[0].intEducation) {
              this.fromdata.intEducation = Boolean(
                JSON.parse(res.data.data[0].intEducation)
              );
            }
            if (res.data.data[0].repPurchase) {
              this.fromdata.repPurchase = Boolean(
                JSON.parse(res.data.data[0].repPurchase)
              );
            }
            this.textarea = res.data.data[0].remark;
          } else {
            this.clearFormdata();
          }
        });
    },

    // 增值服务 立即保存
    submit() {
      var _this = this;
      var name = _this.form.name;
      var outProduction = this.fromdata.outProduction;
      var publicPraise = this.fromdata.publicPraise;
      var certificate = this.fromdata.certificate;
      var intEducation = this.fromdata.intEducation;
      var repPurchase = this.fromdata.repPurchase;
      var remark = _this.textarea;
      _this.axios
        .post(
          "/student/updateTall",
          `name=${name}&outProduction=${outProduction}&publicPraise=${publicPraise}&certificate=${certificate}&intEducation=${intEducation}&repPurchase=${repPurchase}&remark=${remark}`
        )
        .then(res => {
          if (res.data.ok == 1) {
            _this.$notify({
              title: "添加成功",
              message: `${name + res.data.msg}`,
              type: "success"
            });
            _this.clearFormdata();
            _this.messageBox = false;
            _this.reload();
          } else {
            _this.$notify({
              title: "添加失败",
              message: res.data.msg,
              type: "error"
            });
          }
        });
    },
    // 清空增值服务数据
    clearFormdata() {
      for (var item in this.fromdata) {
        this.fromdata[item] = false;
      }
      this.textarea = "";
    },
    // 分页
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style>
.handle-button {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  border-radius: 6px 0 0 6px !important;
  z-index: 999999;
  color: #fff;
}
</style>